<template>
  <div>
    <ksh-layout>
      <template #left>
        <ul class="tongji">
              <li v-for="item in pinzhong">
                <div>{{ item.name }}</div>
                <div>
                  <span class="val">{{ item.value }}</span
                  >{{ item.unit }}
                </div>
              </li>
            </ul>
        <echart-main>
          <template #title>精品项目</template>
          <template #echart>
            <div class="img-main">
                <img src="~assets/img/ksh/xm1.jpg" alt="">
                <img src="~assets/img/ksh/xm2.jpg" alt="">
                <img src="~assets/img/ksh/xm3.jpg" alt="">
                <img src="~assets/img/ksh/xm4.jpg" alt="">
              </div>
          </template>
        </echart-main>
        <echart-main class="box">
          <template #title>开发情况</template>
          <template #echart>
            <echart :options="option1" />
          </template>
        </echart-main>
        <echart-main class="box">
          <template #title>收入趋势</template>
          <template #echart>
            <echart :options="option2" />
          </template>
        </echart-main>
      </template>
      <template #right>
        <echart-main>
          <template #title>产业展示</template>
          <template #echart>
            <div class="img-main">
                <img src="~assets/img/ksh/cp1.jpg" alt="">
                <img src="~assets/img/ksh/cp2.jpg" alt="">
                <img src="~assets/img/ksh/cp3.jpg" alt="">
                <img src="~assets/img/ksh/cp4.jpg" alt="">
                <img src="~assets/img/ksh/cp5.jpg" alt="">
                <img src="~assets/img/ksh/cp6.jpg" alt="">
              </div>
          </template>
        </echart-main>
        <echart-main>
          <template #title>文化生活</template>
          <template #echart>
            <div class="img-main">
                <img src="~assets/img/ksh/sh1.jpg" alt="">
                <img src="~assets/img/ksh/sh2.jpg" alt="">
                <img src="~assets/img/ksh/sh3.jpg" alt="">
                <img src="~assets/img/ksh/sh4.jpg" alt="">
                <img src="~assets/img/ksh/sh5.jpg" alt="">
                <img src="~assets/img/ksh/sh6.jpg" alt="">
              </div>
          </template>
        </echart-main>
      </template>
    </ksh-layout>
  </div>
</template>

<script>
import Echart from "components/common/echart/Echart.vue";
import { echart19, echart14 } from "./option";
import KshLayout from "components/content/layoutMain/KshLayout.vue";
import EchartMain from "components/content/echartMain/EchartMain.vue";
export default {
  components: { Echart, KshLayout, EchartMain },
  data() {
    return {
      option1: null,
      option2: null,
      pinzhong: [{
        name: '玉米',
        value: 0,
        unit: '公斤'
      },{
        name: '胡萝卜',
        value: 0,
        unit: '公斤'
      },{
        name: '牛',
        value: 0,
        unit: '头'
      },{
        name: '羊',
        value: 0,
        unit: '头'
      }]
    };
  },
  created() {
    this.option1 = echart19(
      ["种植", "养殖", "林业", '矿业'],
      [100, 200, 300, 400]
    );
    this.option2 = echart14({
      x: ["2016", "2017", "2018", "2019", "2020", "2021"],
      y: [
        {
          name: "种植",
          type: "line",
          data: [120, 132, 101, 134, 90, 230, 210],
        },
        {
          name: "养殖",
          type: "line",
          data: [220, 182, 191, 234, 290, 330, 310],
        }
      ]
    });
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
.box {
  height: 12.5rem;
}
.img-main {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0.625rem;
  img {
    width: 48%;
    margin: 0.3125rem 0;
  }
}
.tongji {
  display: flex;
  padding: 0.625rem 0;
  li {
    font-size: 1rem;
    width: 25%;
    text-align: center;
    div {
      margin: 0.3125rem 0;
      .val {
        color: #33f1f9;
        font-family: "shuzi";
        font-size: 1.5rem;
      }
    }
  }
}
</style>